<breadcrumb></breadcrumb>

<mat-card>
  <div class="demo-list">
    <section>
      <h2> Seasoning </h2>
      <p>Showing a non-interactive list of seasonings.</p>
      <mat-list role="list">
        <mat-list-item role="listitem" *ngFor="let item of items"> {{item}} </mat-list-item>
      </mat-list>
    </section>


    <section>
      <h2>Mailbox navigation</h2>
      <p>Showing a navigation list with links to google search</p>
      <mat-nav-list>
        <a mat-list-item *ngFor="let link of links"
           href="https://www.google.com/search?q={{link.name}}">
          {{link.name}}
        </a>
      </mat-nav-list>
    </section>

    <section>
      <h2>Messages</h2>
      <p>
        Showing a list of messages, where each message item has sender's name, sender's avatar,
        message subject, and content of the message.
      </p>
      <mat-list role="list">
        <mat-list-item role="listitem" *ngFor="let message of messages">
          <img mat-list-avatar [src]="message.image" [alt]="message.from">
          <h3 mat-line> {{message.from}} </h3>
          <p mat-line> {{message.subject}} </p>
          <p mat-line class="demo-secondary-text"> {{message.message}} </p>
        </mat-list-item>
      </mat-list>

    </section>

    <section>
      <h2>Seasoning</h2>
      <p>Showing a non-interactive list of seasonings with dense style.</p>
      <mat-list role="list" dense>
        <mat-list-item role="listitem" *ngFor="let item of items"> {{item}} </mat-list-item>
      </mat-list>
    </section>

    <section>
      <h2>Folders and notes for mailbox </h2>
      <p>Showing a list with two sections, "folders" and "notes".</p>
      <mat-list role="list">
        <h3 mat-subheader>Folders</h3>
        <mat-list-item role="listitem" *ngFor="let folder of folders">
          <mat-icon mat-list-icon>folder</mat-icon>
          <h4 mat-line>{{folder.name}}</h4>
          <p mat-line class="demo-secondary-text"> {{folder.updated}} </p>
        </mat-list-item>
        <mat-divider></mat-divider>
        <h3 mat-subheader>Notes</h3>
        <mat-list-item role="listitem" *ngFor="let note of notes">
          <mat-icon mat-list-icgon>note</mat-icon>
          <h4 mat-line>{{note.name}}</h4>
          <p mat-line class="demo-secondary-text"> {{note.updated}} </p>
        </mat-list-item>
      </mat-list>
    </section>
  </div>
</mat-card>